<template>
    <el-card style="margin-top: 30px;">
      <div slot="header"><span>{{ dataSource.typeName }}</span></div>
      <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" v-if="data.length > 0">
        <v-tooltip :showTitle="false" dataKey="item*percent" />
        <v-axis />
        <v-legend dataKey="item" />
        <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig" />
        <v-coord type="theta" />
      </v-chart>
      <a-empty class="empty" description="暂无数据" v-else/>
    </el-card>
</template>

<script>
  const DataSet = require('@antv/data-set');
  const scale = [{
    dataKey: 'percent',
    min: 0,
    formatter: '.0%',
  }];

  export default {
    name: "pieCard",
    props: {
      dataSource: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    watch: {
      dataSource: {
        handler: function(val, oldVal) {
          console.log(val)
          if (val) this.productionData([
            { item: '已使用', count: val['usage'] || 0 },
            { item: '未使用', count: val['surplusUsage'] || 0 },
          ])
        },
        immediate: true
      }
    },
    computed: {

    },
    data() {
      return {
        data: [],
        scale,
        height: 400,
        pieStyle: {
          stroke: "#fff",
          lineWidth: 1
        },
        labelConfig: ['percent', {
          formatter: (val, item) => {
            return item.point.item + ': ' + val;
          }
        }],
      }
    },
    methods: {
      productionData(sourceData) {
        console.log(sourceData)
        const dv = new DataSet.View().source(sourceData);
        dv.transform({
          type: 'percent',
          field: 'count',
          dimension: 'item',
          as: 'percent'
        });
        this.data = dv.rows;
      }
    }
  }
</script>

<style scoped>
  .empty{
    padding: 25px 0px;
  }
</style>
